<template>
  <div class="head-container">
    <nav
      class="navtop"
      :style="{height: $route.path === '/index' ? '360px':'85px'}"
    >
      <div class="flexTwoEnd whitebg">
        <div class="nav-logo row-start-col-center fwbold pl300">
          <img
            src="@/assets/image/logomini.png"
            style=" width:50px;height:48px"
            alt=""
          >
          <div>广西制造业企业培优育强服务券管理平台</div>
        </div>
        <div class="nav-logo nav-navigation flexStart pr300">
          <div
            v-if="!getToken()"
            class="row-start"
          >
            <div
              class="comLi color-gray66 showMouse"
              @click="openRegister"
            >
              注册
            </div>
            <div
              class="comLi color-forecolor showMouse ml20"
              @click="openLogin"
            >
              登录
            </div>
          </div>
          <div
            v-if="getToken()"
            class="comLi row-start-col-center"
          >
            <el-dropdown
              @command="handleDropdown"
              @click="gotoUserCenter"
            >
              <el-button
                type="text"
                class="color-forecolor"
              >
                <div class="row-start-col-center">
                  <img
                    src="@/assets/image/avatar.png"
                    style=" width:30px;height:30px"
                    alt=""
                  >
                  <p class="ml10">{{ nickName || 'admin' }} <i class="el-icon-arrow-down ml5 mr5" /></p>
                </div>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="userCenter">个人中心</el-dropdown-item>
                <el-dropdown-item command="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <div
              v-if="userInfo?.isCompanyAuth"
              class="comLi color-gray66 showMouse mb15"
            >
              <el-button
                size="mini"
                plain
                type="primary"
                @click="openMessageVisible=true"
              > 我要留言 </el-button>
            </div>
          </div>
        </div>
      </div>
      <template v-if="$route.path === '/index'">
        <div class="row-spaceb pl300 pr300">
          <div>
            <div class="nav-title">
              广西制造业企业培优育强服务券活动进行中
            </div>
            <div class="row-start-col-center mt10 fs18">
              <div>制造业企业购买服务可累计使用配额抵扣最高 <span class="color-red fwbold">30万</span>元/年</div>
              <div
                class="ml10 mr10"
                style="width: 1px;height: 11px;border: 1px solid #436AF7;"
              ></div>
              <div>签约服务商可累计结算补贴 <span class="color-red fwbold">500万</span>元/年</div>
            </div>
            <div class="nav-time">
              <!-- 申请时间：<span>2024年9月18日~2024年12月31日</span> -->
            </div>
            <div class="mt10">
              <el-button
                type="success"
                @click="requestOrg"
                class="button2"
              >申请成为服务商</el-button>
              <el-button
                type="primary"
                @click="requestCoupons"
                class="button1 ml30"
              >服务券配额申请</el-button>
            </div>
          </div>
          <div class="pt40 fs18 tr">
            <div class="row-end-col-center">
              已成功配额企业
              <span
                v-for="(digit, index) in summaryObj.receiveVoucherCompanyCount.toString().split('')"
                :key="index"
                class="coupon-digit"
              >{{ digit }}</span>
              家
            </div>
            <div class="row-end-col-center mt10">
              累计签订合同金额
              <span
                v-for="(digit, index) in receiveVoucherCompanyRatio.toString().split('')"
                :key="index"
                class="coupon-digit"
              >{{ digit }}</span>
              万元
            </div>
            <div class="row-end-col-center mt10">
              通用券剩余可结算资金
              <span
                v-for="(digit, index) in voucherBalanceAmount.toString().split('')"
                :key="index"
                class="coupon-digit"
              >{{ digit }}</span>
              万元
            </div>
            <!-- <div
              class="row-end-col-center mt10"
              v-if="residueDay != 0"
            >
              2025年第二批兑付结算倒计时
              <span class="coupon-digit">{{ residueDay }}</span>
              天
            </div> -->
            <!-- <div class="mt30 color-text" style="font-family:'SourceHanSansCN-Bold';">
                   已有<span class="color-red"> {{summaryObj.receiveVoucherCompanyCount}} 家</span>企业服务券配额申请
                </div>
                <div class="mt10 color-text" style="font-family:'SourceHanSansCN-Bold';">
                   已有<span class="color-red"> {{summaryObj.supplierCount}} 家</span>服务商入驻平台提供服务
                </div> -->
          </div>
        </div>
        <div class="pt10 mb10 pl300 pr300">
          <el-row :gutter="10">
            <el-col
              :span="4"
              v-for="(item, index) in statisticsData"
              :key="index"
            >
              <el-card
                class="statistic-card"
                shadow="hover"
              >
                <div
                  class="statistic-value showMouse"
                  @click="openPageList(index)"
                ><span
                    class="fs14 color-grey"
                    v-if="item.uptitle"
                  >{{item.uptitle}}</span>{{ item.value }} {{ item.unit }}</div>
                <div class="statistic-title">{{ item.title }}</div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </template>
    </nav>
    <div class="smallblock row-start bg-backcolor color-white">
      <div
        v-for="(item,index) in pathNav"
        :key="index"
        class="menuTitle row-start-col-center"
        @click="changeItem(item)"
      >
        <div :class="[currentItem ===  item.name ?'subItemSel':'subItem','showMouse','fs18']">
          {{item.name}}
        </div>
        <el-divider
          v-if="index != pathNav.length -1"
          direction="vertical"
        ></el-divider>
      </div>
    </div>
    <!-- 需要认证提示 -->
    <el-dialog
      title="服务券配额申请"
      :visible.sync="tipVisible"
      width="525px"
      custom-class="my-dialog"
    >
      <p style="margin-top: -10px;">需要完成<span style="color: #436AF7;">“企业信息认证”</span>才可进行“服务券配额申请”、“申请入驻”或“支付认证”的操作，请先完成认证。</p>
      <div style="text-align: right;margin-top: 40px;">
        <el-button
          type="info"
          size="medium"
          @click="tipVisible = false"
        >暂不认证</el-button>
        <el-button
          type="primary"
          size="medium"
          class="blue-btn"
          @click="() => { tipVisible = false; goToAuth() }"
        >前往认证</el-button>
      </div>
    </el-dialog>
    <!-- 留言 -->
    <el-dialog
      title="留言信箱"
      :visible.sync="openMessageVisible"
      width="700px"
      custom-class="my-dialog"
    >
      <el-alert
        title="您好!欢迎进入留言信箱，可将您的问题或建议通过留言告诉我们。收到留言后将在3个工作日内回复，感谢您对我们工作的关心和支持!"
        :closable="false"
        type="warning"
        effect="dark"
      >
      </el-alert>
      <el-form
        :model="messageForm"
        :rules="messageRules"
        ref="messageForm"
        label-width="140px"
      >
        <el-form-item
          label="企业:"
          prop="companyName"
        >
          {{userInfo.companyName}}
        </el-form-item>
        <el-form-item
          label="问题描述:"
          prop="problem"
        >
          <el-input
            v-model="messageForm.problem"
            placeholder="请输入问题描述(最多可输入100字)"
            style="width:90%"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="问题详细描述:"
          prop="problemDesc"
        >
          <el-input
            type="textarea"
            :rows="5"
            v-model="messageForm.problemDesc"
            placeholder="请输入问题描述(最多可输入1000字)"
            style="width:90%"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号:">
          {{userInfo.userPhoneNum}}
        </el-form-item>
        <el-form-item
          label="验证码:"
          prop="smsCode"
        >
          <el-input
            v-model="messageForm.smsCode"
            style="width:90%"
          >
            <template #append>
              <el-button
                :disabled="countdown > 0"
                @click="getSmsCode"
              >{{ countdown > 0 ? `${countdown}秒` : '获取验证码' }}</el-button>
            </template>
          </el-input>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="openMessageVisible = false">取 消</el-button>
        <el-button
          :loading="loading"
          type="primary"
          @click="submitMessage"
        >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  userinfo,
  portalSummary,
  message,
  sendMessageCode,
  confirmServiceApplyPopup,
} from "@/api/homeApi";
import { mapGetters } from "vuex";
import { getToken } from "@/utils/auth";
export default {
  components: {},
  data() {
    return {
      wid: 0,
      toUrl: "/imagesensor",
      userName: "管理员",
      nickName: "",
      telnumber: "",
      navIndex: 0,
      currentTab: 1,
      currentItem: "首页",
      roleNames: [],
      isAdmin: false,
      pathNav: [
        { name: "首页", path: "/index", tab: 1, children: ["index"] },
        {
          name: "通用券服务",
          path: "/productListGeneral",
          tab: 1,
          // children: ['personalCenter', 'couponApply', 'couponOrder', 'serviceCompanyInfo', 'couponExchange', 'myColletion', 'couponApplyExamine']
        },
        { name: "设备更新专项券服务", path: "/productListSpecial", tab: 1 },
        // {name: '服务商', path: '/serviceCompany', tab: 1, children: ['serviceCompany']},
        {
          name: "企业需求",
          path: "/requirementList",
          tab: 1,
          children: ["requirementList"],
        },
      ],
      AdminList: ["admin"],
      tipVisible: false,
      couponNumber: 9999.99,
      summaryObj: {
        receiveVoucherCompanyCount: 0,
        supplierCount: 0,
        voucherBalanceAmount: 0,
        voucherDeliveryAmount: 0,
      },
      residueDay: 0,
      openMessageVisible: false,
      messageForm: {
        companyName: "",
        problem: "",
        problemDesc: "",
        smsCode: "",
      },
      messageRules: {
        problem: [
          { required: true, message: "请输入问题描述", trigger: "blur" },
        ],
        problemDesc: [
          { required: true, message: "请输入问题详细描述", trigger: "blur" },
        ],
        smsCode: [{ required: true, message: "请输入验证码", trigger: "blur" }],
      },
      countdown: 0,
      phoneCaptchaObj: {
        img: "",
        uuid: "",
      },
      loading: false,
      statisticsData: [
        { value: "16", unit: "家", title: "企业入驻平台", uptitle: "已有" },
        {
          value: "9",
          unit: "家",
          title: "服务商入驻平台服务",
          uptitle: "已有",
        },
        { value: "9999", unit: "项", title: "服务产品" },
        { value: "9999", unit: "项", title: "企业累计签约合同" },
        { value: "999", unit: "万元", title: "累计抵扣金额" },
        // { value: '9999', unit: '项', title: '服务商累计验收合同' },
        { value: "999", unit: "万元", title: "累计结算金额" },
      ],
      bankVisible: false,
      requestVisible: false,
    };
  },
  computed: {
    voucherBalanceAmount() {
      //const trannum = Math.round(this.summaryObj.voucherBalanceAmount / 1000000)
      const trannum = 1918;
      return trannum;
    },
    receiveVoucherCompanyRatio() {
      //const trannum = (this.summaryObj.receiveVoucherCompanyRatio * 100).toFixed(2)
      const trannum = Math.round(this.summaryObj.contractTotalAmount / 1000000);
      return trannum;
    },
    currentPath() {
      return this.$route.path.split("/")[1];
    },
    hourText() {
      const time = new Date();
      const hour = time.getHours();
      return hour < 9
        ? "早上好"
        : hour <= 11
        ? "上午好"
        : hour <= 13
        ? "中午好"
        : hour < 20
        ? "下午好"
        : "晚上好";
    },
    ...mapGetters(["userInfo"]),
  },
  mounted() {
    this.getDay();
    this.setCurrentItem();
    if (this.getToken()) {
      this.getUserInfo();
    } else {
      this.bankVisible = true;
    }
    this.getSummary();
  },
  watch: {
    "$route.path": function (newVak, oldVal) {
      let obj = this.pathNav.find((item) => item.path === newVak);
      console.log("obj", obj);
    },
  },
  methods: {
    getDay() {
      const today = new Date();
      const currentYear = today.getFullYear();
      const targetDate = new Date(currentYear, 9, 20); // 10月20日 (月份从0开始，所以9代表10月)

      const timeDiff = targetDate.getTime() - today.getTime();
      this.residueDay = Math.ceil(timeDiff / (1000 * 3600 * 24));
    },
    getToken,
    getUserInfo() {
      userinfo().then((res) => {
        this.userName = res.data?.username;
        this.nickName = res.data?.nickName;
        this.telnumber = res.data?.telnumber;
        this.roleNames = res.data?.roleNames;
        if (res.data?.showServiceApplyPopup == 1) {
          this.requestVisible = true;
        }
        // this.isAdmin = this.roleNames.some(item => this.AdminList.includes(item))
      });
    },
    openPageList(index) {
      if (index === 1) {
        this.$router.push({ path: "/serviceCompany" });
      }
    },
    confirmServiceApply(type) {
      if (type === 1) {
        confirmServiceApplyPopup({ selection: 1 }).then((res) => {
          if (res.code === 200) {
            this.requestVisible = false;
          }
        });
      } else {
        this.requestVisible = false;
        this.$router.push({ name: "个人中心" });
      }
    },
    getSummary() {
      portalSummary().then((res) => {
        if (res.code === 200) {
          this.summaryObj = res.data;
          // companyCount
          // contractSignCount
          // contractSubsidyCount
          // discountAmount
          // receiveVoucherCompanyCount
          // receiveVoucherCompanyRatio
          // subsidyAmount
          // supplierCount
          // voucherBalanceAmount
          // voucherDeliveryAmount
          this.statisticsData[0].value = this.summaryObj.companyCount; //企业入驻数量
          this.statisticsData[1].value = this.summaryObj.supplierCount; //服务商入驻数量
          this.statisticsData[2].value = this.summaryObj.productCount; //服务产品数量
          this.statisticsData[3].value = this.summaryObj.contractSignCount; //服务商累计验收合同数量
          this.statisticsData[4].value = Math.round(
            this.summaryObj.discountAmount / 1000000
          ); //累计抵扣金额
          this.statisticsData[5].value = Math.round(
            this.summaryObj.subsidyAmount / 1000000
          ); //累计结算金额
        }
      });
    },
    requestCoupons() {
      if (this.userInfo?.isCompanyAuth) {
        this.$router.push({ name: "服务券配额申请" });
      } else {
        // this.tipVisible = true
        this.$router.push({ name: "个人中心" });
      }
    },
    goToAuth() {
      this.$router.push({ name: "个人中心" });
    },
    requestOrg() {
      if (this.userInfo?.isCompanyAuth) {
        this.$router.push({ name: "申请入驻平台" });
      } else {
        // this.tipVisible = true
        this.$router.push({ name: "个人中心" });
      }
    },
    openRegister() {
      this.$router.push({ path: "/register" });
    },
    openLogin() {
      this.$router.push({ path: "/login" });
    },
    gotoUserCenter() {
      if (this.$route.name !== "个人中心") {
        this.$router.push({ name: "个人中心" });
      }
    },
    setCurrentItem() {
      let obj = this.pathNav.find((item) => item.path === this.$route.path);
      if (!obj) {
        this.currentTab = 2;
        obj = this.pathNav.find((item) => item.path === this.$route.path);
      } else {
        this.currentTab = obj.tab;
      }
      this.currentItem = obj?.name;
    },
    changeItem(obj) {
      if (obj.path) {
        if (this.$route.path !== obj.path) {
          this.$router.push(obj.path);
        }
        this.currentItem = obj.name;
      } else {
        this.$message({
          showClose: true,
          message: "该功能正在开发中，敬请期待!",
          type: "warning",
        });
      }
    },
    async logout() {
      await this.$store.dispatch("user/loginout");
      // this.$router.push(`/login?redirect=${this.$route.fullPath}`)
    },
    toHome() {
      this.$router.push("/index");
    },
    handleDropdown(command) {
      switch (command) {
        case "userCenter":
          if (this.$route.name !== "个人中心") {
            this.$router.push({ name: "个人中心" });
          }
          break;
        case "logout":
          this.logout();
          break;
        default:
          break;
      }
    },
    sendMessage() {
      this.openMessageVisible = true;
    },
    submitMessage() {
      this.$refs.messageForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          message(this.messageForm)
            .then((res) => {
              if (res.code === 200) {
                this.$message.success("留言成功");
                this.openMessageVisible = false;
              }
            })
            .finally(() => {
              this.loading = false;
            });
          this.openMessageVisible = false;
        }
      });
    },
    getSmsCode() {
      sendMessageCode().then((res) => {
        if (res.code === 200) {
          this.countdown = 60;
          const timer = setInterval(() => {
            if (this.countdown > 0) {
              this.countdown--;
            } else {
              clearInterval(timer);
            }
          }, 1000);
        }
      });
    },
    // 获得图形验证码确认弹窗内的图形验证码
    getPhoneCaptcha() {
      getcode().then((res) => {
        this.phoneCaptchaObj.img = "data:image/png;base64," + res.img;
        this.phoneCaptchaObj.uuid = res.uuid;
      });
    },
  },
};
</script>
<style scoped lang="scss">
@import "@/assets/css/element-variables";
.fontsyht {
  font-family: "SourceHanSansCN-Medium";
}
.menuTitle:first-child {
  margin-left: 15%;
}
.head-container {
  width: 100%;
  min-width: 1750px;
}
.coupon-digit {
  background: #436af7;
  border-radius: 5px 5px 5px 5px;
  font-weight: 400;
  font-size: 28px;
  color: #ffffff;
  line-height: 32px;
  padding: 3px 5px;
  margin: 0 2px;
  font-family: "numberTitle";
}
.pl300 {
  padding-left: 15%;
}
.pr300 {
  padding-right: 15%;
}
.smallblock .el-divider--vertical {
  margin: 0px 20px;
}
.navtop {
  width: 100%;
  background-image: url("@/assets/image/nav_bg1.png");
}
.nav-title {
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-size: 36px;
  color: #292929;
  font-weight: bold;
  text-align: left;
  padding-top: 28px;
}
.nav-time {
  font-size: 14px;
  color: #7686a3;
  margin-top: 10px;
}
.whitebg {
  background: rgba(255, 255, 255, 0.6);
}
.smallblock {
  width: 100%;
  height: 60px;
  background: #ffffff;
  box-shadow: 0px 10px 10px 2px rgba(0, 0, 0, 0.1);
  border-radius: 0px 0px 0px 0px;
  color: #7686a3;
}
.subItemSel {
  font-weight: 600;
  color: #436af7;
}
nav {
  width: 100%;
  min-width: 950px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  background-size: 100% 100%;
  z-index: 99;
  position: relative;
}
.nav-logo {
  height: 85px;
  font-size: 26px;
  line-height: 85px;
}
.nav-navigation {
  position: absolute;
  right: 0px;
}
.nav-logo_img {
  height: 55px;
  margin-top: 20px;
  margin-left: 40px;
  margin-right: 20px;
  cursor: pointer;
}
.nav-tab1 {
  position: relative;
}
.nav-tab {
  color: #fff;
  position: absolute;
  bottom: 0;
  left: 36%;
}
.currentStyle {
  color: #004cfb;
  font-weight: 600;
}
.comLi {
  height: 60px;
  line-height: 100px;
  font-size: 16px;
}
.el-dropdown {
  display: inline-block;
  position: relative;
  color: #606266;
  font-size: 14px;
  height: 50px;
}
.el-divider--horizontal {
  margin: 10px 0px;
}
.button1 {
  width: 202px;
  height: 40px;
  background: #ffffff;
  border-radius: 5px 5px 5px 5px;
  border: 1px solid #436af7;
  color: #436af7;
}
.button2 {
  width: 262px;
  height: 40px;
  background: linear-gradient(180deg, #002ccc 0%, #4da2f6 100%);
  border: 1px solid #436af7;
  box-shadow: 6px 6px 6px 1px rgba(0, 76, 255, 0.2);
  border-radius: 5px 5px 5px 5px;
}

.statistic-card {
  text-align: center;
  height: 70px;
  padding: 12px 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: rgba(67, 106, 247, 0.2);
  border: 1px solid transparent;
}

.statistic-value {
  font-size: 24px;
  font-weight: bold;
  color: #436af7;
}

.statistic-unit {
  font-size: 14px;
  color: #909399;
}

.statistic-title {
  font-size: 14px;
  color: #292929;
  margin-top: 5px;
}
@media screen and (max-width: 768px) {
  .el-col {
    width: 50%;
  }
}

@media screen and (max-width: 480px) {
  .el-col {
    width: 100%;
  }
}
@media screen and (max-width: 980px) {
  nav > ul > li {
    width: 90px;
  }
  .comLi {
    margin-right: 0;
    padding: 0 0;
  }
}
.imagebox {
  border: 1px solid #e4ede7;
  border-radius: 5px;
}
</style>
